<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery选择器</title>
    <script src="./lib/jquery-3.4.1.js"></script>
    <script>
        $(document).ready(function(){
            // 基本选择器 5个
            // Jquery 对象
            console.log( $("#item01")); 
            // $("#item01").style.color="red"; //不能这样写
            // 1. id 
            // $("#item01").css("color","gold");
            // 2. class 
            // $(".item02").css("border","1px solid red");
            // 3. element
            // $("li").css("color","pink");
            // 4. * 通配符
            // $("*").css("color","red");
            // 5. , 
            // $("ul,div,p").css("backgroundColor","red");


            // 层级选择器 4个
            // 1. 空格 后代
            // $("div span").css("border","1px solid red");
            // 2. > 子代
            // $("div > span").css("border","1px solid red");
            // 3. + 
            // $("li.item02 + li").css("border","1px solid red");
            // 4. ~
            // $("li.item02 ~ li").css("border","1px solid red");

            // 基本过滤选择器
            // $("li:first").css("border","1px solid red");
            // $("li:last").css("border","1px solid red");
            // 偶数行 ，下标从零开始
            // $("li:even").css("border","1px solid red");
            // 奇数行
            // $("li:odd").css("border","1px solid red");
            // eq 相等  下标从零开始
            // $("li:eq(0)").css("border","1px solid red");
            // $("li:gt(3)").css("border","1px solid red");
            // $("li:lt(3)").css("border","1px solid red");
            // $("li:not(.item02)").css("border","1px solid red");
            // $("ul:lang(en)").css("color","red");
            // $("h1:header").css("border","1px solid red");
            // $("input:focus").css("border","3px solid red");

            // 过滤 选择器 内容
            // $("div:contains(第二)").css("border","3px solid red");
            // $("div:empty").css({
            //     width:'200px',
            //     height:'30px',
            //     border:"3px solid red"
            // });
            // console.log($("div:empty"));

            // $("div:has(.box2)").css("color","red");
            // $("span:parent").css("color","red");

            // console.log($(":hidden"));
            // console.log($("li:visible"));

            // 过滤选择器 属性

            // $("li[class]").css("border","1px solid red")
            // $("li[class=item02]").css("border","1px solid red")
            // $("li[class!=item02]").css("border","1px solid red")
            // $("li[class^=it]").css("border","1px solid red")
            // $("li[class$=4]").css("border","1px solid red")
            // $("li[class*=m]").css("border","1px solid red")
            // $("li[id][class^=it][class$=4]").css("border","1px solid red")

            // 过滤选择器 子元素
            // $("li:first-child").css("border","1px solid red");
            // $("li:last-child").css("border","1px solid red");
            // nth-child 下标从 1 开始
            // $("li:nth-child(1)").css("border","1px solid red");

            // $("ul li:only-child").css("border","1px solid red")

        //    console.log($(":input"));
        //    console.log($(":text"));
        //    console.log($(":enabled"));
        //    console.log($(":disabled"));

            // $ Jquery
            // var jQuery="";
           console.log(jQuery(":disabled"));
           console.log($("span:first"));
          
           
        })

        window.onload = function(){
             // DOM 对象
            // var a = document.getElementById("item01");
            // a.style.color="red";
            // console.log(a);
            var a = document.querySelector("#item01") ;
            var aa = document.querySelectorAll("li") ;
            console.log(aa);
        }
    </script>
</head>
<body>
    <label>姓名：</label>
    <input type="text" disabled placeholder="请输入姓名" autofocus>
    <input type="hidden" placeholder="请输入密码">
    <textarea name="" id="" cols="30" rows="10"></textarea>
    <select name="" id="">
        <option value="1">1</option>
        <option value="2">1</option>
        <option value="3">1</option>
        <option value="4">1</option>
        <option value="5">1</option>
    </select>
    <input type="radio" name="gender" id="">男
    <input type="radio" name="gender" id="">女

    <input type="checkbox" name="love" id="">敲代码
    <input type="checkbox" name="love" id="">玩游戏
    <input type="checkbox" name="love" id="">看书
    <input type="checkbox" name="love" id="">运动
    <input type="checkbox" name="love" id="">旅游
    <input type="checkbox" name="love" id="">吃
    <input type="checkbox" name="love" id="">睡

    <input type="file" name="" id="">
    <button>点我</button>

    <h1 style="display: none;">一级标题</h1>
    <h6>六级标题</h6>
    <div>
        第一层
        <p>
            第二层
            <span>第三层 span</span>
        </p>
        <span>第二层 span</span>
    </div>
    <div>
        div div div
        <div class="box2">第二个div</div>
    </div>
    <span><i></i></span>
   
    <div>第三个div</div>
    <div> </div>
    <ul lang="zh-CN">
        <li lang="zh-CN" id="item01">item1</li>

    
    </ul>
    <ul>
        <li id="li01">item1</li>
        <li class="item002">item2</li>
        <li>item3</li>
        <li id="aa" class = "item04">item4</li>
        <li>item5</li>
    </ul>
    <div>
        我是div
    </div>
    <p>p标签</p>
</body>
</html>